
<template>
  <div class="container">
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.couponState}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
      <swiper-item class="content_item" v-for="(item,index) in tabs" :key="index">
        <div class="order-info">
          <div class="order-tit">
            <p>订单编号：<span>20181015112350</span></p>
            <p><span class="time-icon"></span><span>5分钟</span>前</p>
          </div>
          <div class="orderInfo">

            <div class="order-way-line">
              <div class="order-start-line">
                <span class="order-icon start"></span><span class="order-txt start-text">始</span><span class="order-dress">海洋大厦</span>
              </div>
              <div class="order-end-line">
                <span class="order-icon end"></span><span class="order-txt end-text">终</span><span class="order-dress">汉城湖南门</span>
              </div>
            </div>

            <div class="order-money">
              <span class="order-price">60.00</span>元
            </div>
          </div>
          <div class="order-state">
            <div>当前状态：<span>待卸货确定</span></div>
            <div class="state-enter">卸货确定</div>
          </div>
          </div>
      </swiper-item>
    </swiper>
    <tab-bar :selectNavIndex="selectNavIndex"></tab-bar>
  </div>
</template>

<script>
import tabBar from '../../../components/tabBar'
export default {
  components: {
    tabBar
  },
  data () {
    return {
      selectNavIndex: 1,
      tabs: [
        {
          couponState: '已接单',
          type: '1',
          checked: true,
          couponPrice: '20',
          couponName: '新用户专享',
          couponRestrict: '满一百元可用',
          couponTime: '2018.10.15'
        },
        {
          couponState: '进行中',
          type: '2',
          checked: true,
          couponPrice: '20',
          couponName: '新用户专享',
          couponRestrict: '满一百元可用',
          couponTime: '2018.10.15'
        },
        {
          couponState: '已完成',
          type: '3',
          checked: true,
          couponPrice: '20',
          couponName: '新用户专享',
          couponRestrict: '满一百元可用',
          couponTime: '2018.10.15'
        },
        {
          couponState: '已取消',
          type: '4',
          checked: true,
          couponPrice: '20',
          couponName: '新用户专享',
          couponRestrict: '满一百元可用',
          couponTime: '2018.10.15'
        }
      ],
      activeIndex: 0,
      currentTab: 0,
      winWidth: 0,
      winHeight: 0
    }
  },
  computed: {
    navbarSliderClass () {
      if (this.activeIndex === 0) {
        return 'navbar_slider_0'
      }
      if (this.activeIndex === 1) {
        return 'navbar_slider_1'
      }
      if (this.activeIndex === 2) {
        return 'navbar_slider_2'
      }
    },
    contentHeight () {
      return this.winHeight + 'rpx'
    }
  },
  methods: {
    tabClick (e) {
      this.activeIndex = e.currentTarget.id
      console.log(e)
      this.currentTab = this.activeIndex
    },
    swiperChange (e) {
      this.currentTab = e.mp.detail.current
      console.log(e)
      this.activeIndex = this.currentTab
    },
    onAnimationfinish () {
      console.log('滑动完成.....')
    }
  },
  onLoad () {
    let res = wx.getSystemInfoSync()
    this.winWidth = res.windowWidth
    this.winHeight = res.windowHeight
    wx.setNavigationBarTitle({
      title: '订单管理'
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#192231',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }
}
</script>

<style>
  .content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 80rpx;
    -webkit-overflow-scrolling: touch;
  }
  .content_item{
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  .navbar {
    display: flex;
    position: fixed;
    z-index: 500;
    top: 0;
    height: 80rpx;
    width: 100%;
    border-bottom: 1rpx solid #ccc;
  }
  .navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13rpx 0;
    text-align: center;
    font-size: 0;
  }
  .navbar_item .navbar_item_on {
    color: #eb493c;
  }
  .navbar_title {
    color: #3b3b3b;
    font-weight: 500;
    display: inline-block;
    font-size: 28rpx;
    max-width: 8em;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .navbar_item_on ::after{
    content: " ";
    width: 60%;
    display: block;
    border-radius: 4rpx;
    height: 4rpx;
    margin: 28rpx auto 0 auto;
    background-color: #eb493c;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
  .navbar_slider_0 {
    left: 29rpx;
    transform: translateX(0);
  }
  .navbar_slider_1 {
    left: 29rpx;
    transform: translateX(250rpx);
  }
  .navbar_slider_2 {
    left: 29rpx;
    transform: translateX(500rpx);
  }
  .order-info{
    width: 690rpx;
    height: 310rpx;
    padding: 0 18rpx;
    margin: 30rpx auto 0 auto;
    box-shadow: 0rpx 5rpx 8rpx #eee;
    border-radius: 25rpx;
    border: 1rpx solid #f6f6f7;
  }
  .order-tit{
    display: flex;
    justify-content: space-between;
    font-size: 22rpx;
    line-height: 60rpx;
    width: 650rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid #f6f6f7;
  }
  .time-icon{
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    background-color: #13bf6c;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 15rpx;
  }
  .orderInfo{
    width: 650rpx;
    margin: 38rpx auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 95rpx;
    border-bottom: 1rpx solid #f6f6f7;
    padding-bottom: 35rpx;
  }
  .order-way-line{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .order-way-line>div{
    display: flex;
    align-items: center;
  }
  .order-icon{
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #fff;
  }
  .start{
    border: 4rpx solid #13bf6c;
  }
  .end{
    border: 4rpx solid #ed493d;
  }
  .start-text{
    color: #13bf6c;
  }
  .order-txt{
    font-size: 24rpx;
    padding: 0 35rpx 0 18rpx;
  }
  .end-text{
    color: #ed493d;
  }
  .order-dress{
    font-size: 28rpx;
    flex: 1;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .order-money{
    font-size: 20rpx;
  }
  .order-price{
    font-size: 30rpx;
    color: #ed493d;
    font-weight: bold;
  }
  .order-state{
    font-size: 22rpx;
    display: flex;
    height: 70rpx;
    align-items: center;
    justify-content: space-between;
  }
  .state-enter{
    width: 150rpx;
    line-height: 50rpx;
    color: #ed493d;
    border: 1rpx solid #ed493d;
    text-align: center;
    border-radius: 15rpx;
  }
</style>
